<div class='bc-info' data-port="http://api.hongyanche.com/user/info" id="user-info">
	<div class='weui-flex weui-flex-xs' style='align-items: center;padding:20px;'>
		<headimgurl info=i><img src='' style="border:2px solid white;margin-right:10px;border-radius:50%;background-color:#666;height:40px;width:40px;" /></headimgurl>
		<div class='weui-flex__item'>
			<user_name info=1 style="font-size:18px;"></user_name> # <user_id info=1></user_id>
		</div>
		<small><a id="logout" mute href='javascript:void();'>退出登录</a></small>
	</div>
</div>
<sss>
	$(window).on('bc-logout-success', function() {
		info.reload("#user-info");
		$('#login-panel input,#user-info-panel input').val('');
	});
	$("#user-info").on('bc-info-error',function(e,res){
		$("#user-loading").remove();
		$('#login-panel').removeClass('hidden')
		$('#login-panel').hide()
		$('#login-panel').fadeIn(1000);
		$('#user-info-panel').addClass('hidden');
		$('#admin-panel').addClass('hidden')
	})
	$("#user-info").on('bc-info-success',function(e,res){
		$("#user-loading").remove();
		$('#login-panel').addClass('hidden')
		$('#admin-panel').addClass('hidden')
		$('#user-info-panel').removeClass('hidden');
		$('#user-info-panel').hide();
		$('#user-info-panel').fadeIn(1000);
		rank.reload("#admin-menu");
	})
	$("#admin-menu").on("bc-rank-success",function(e,res){
		$("#admin-menu").removeClass('hidden');
		$("#user-menu").addClass('hidden');
		$('#admin-menu').fadeIn();
	})
</sss>
<style>
	.user-menu div
	{float: left;width:33%;}
	.user-menu:after
	{clear:both;}
	.user-menu a
	{display:block;background-color: white;font-size:14px;text-align: center;margin:1px;padding:10px 0;color:#ddd;}
	.user-menu div.active a
	{color:#666;}
	@media(min-width: 1000px){
		.user-menu div.active a:hover,.user-menu div.active a:hover i
		{color:white!important;}
	}
	.user-menu a:hover,.user-menu a:hover i
	{text-decoration: none;}
	.user-menu div.active a:active,.user-menu div.active a:active i
	{color:white!important;}
	.user-menu i
	{font-size:28px;display:block;}

	.user-menu div.active:nth-child(1) i{color:chocolate;}
	.user-menu div.active:nth-child(2) i{color:teal;}
	.user-menu div.active:nth-child(3) i{color:cornflowerblue;}
	.user-menu div.active:nth-child(4) i{color:darkolivegreen;}
	.user-menu div.active:nth-child(5) i{color:indigo;}
	.user-menu div.active:nth-child(6) i{color:maroon;}
	.user-menu div.active:nth-child(7) i{color:goldenrod;}
	.user-menu div.active:nth-child(8) i{color:lightslategray;}
	.user-menu div.active:nth-child(9) i{color:olive;}
	@media(min-width: 1000px){
		.user-menu div.active:nth-child(1) a:hover{background-color: chocolate;}
		.user-menu div.active:nth-child(2) a:hover{background-color: teal;}
		.user-menu div.active:nth-child(3) a:hover{background-color: cornflowerblue;}
		.user-menu div.active:nth-child(4) a:hover{background-color: darkolivegreen;}
		.user-menu div.active:nth-child(5) a:hover{background-color: indigo;}
		.user-menu div.active:nth-child(6) a:hover{background-color: maroon;}
		.user-menu div.active:nth-child(7) a:hover{background-color: goldenrod;}
		.user-menu div.active:nth-child(8) a:hover{background-color: lightslategray;}
		.user-menu div.active:nth-child(9) a:hover{background-color: olive;}
	}
	.user-menu div.active:nth-child(1) a:active{background-color: chocolate;}
	.user-menu div.active:nth-child(2) a:active{background-color: teal;}
	.user-menu div.active:nth-child(3) a:active{background-color: cornflowerblue;}
	.user-menu div.active:nth-child(4) a:active{background-color: darkolivegreen;}
	.user-menu div.active:nth-child(5) a:active{background-color: indigo;}
	.user-menu div.active:nth-child(6) a:active{background-color: maroon;}
	.user-menu div.active:nth-child(7) a:active{background-color: goldenrod;}
	.user-menu div.active:nth-child(8) a:active{background-color: lightslategray;}
	.user-menu div.active:nth-child(9) a:active{background-color: olive;}

	#admin-menu .admin-menu-btn
	{width:25%;float: left;text-align: center;padding:20px 0;cursor: pointer;display: block;color:#222;}
	@media(min-width: 1000px){
		#admin-menu .admin-menu-btn:hover
		{background: #F8F8F8}
	}
	#admin-menu .admin-menu-btn:active
	{background: #F8F8F8}
	.admin-menu-btn-manage:before{content:"管理员";}
	.admin-menu-btn-mall:before{content:"产品";}
	.admin-menu-btn-maintain:before{content:"保养维修";}
	.admin-menu-btn-network:before{content:"网络";}
	.admin-menu-btn-marketing:before{content:"营销";}
	.admin-menu-btn-finance:before{content:"财务";}
</style>
<div id="admin-menu" class='hidden bc-rank no-init' data-port='http://api.hongyanche.com/admin/menu'>
	<div class="weui-btn-area">
		<div class='weui-cells__title' style='display: block;'>管理员中心 <a href="javascript:$('#admin-menu').addClass('hidden');$('#user-menu').removeClass('hidden');$('#user-menu').fadeIn()" class="pull-right"> × 关闭</a></div>
		<div class='weui-cells' style='background:white;border-radius:5px;'>
			<a target="_blank" href='/worktable/__value__' class='bc-rank-template admin-menu-btn' >
				<div class='admin-menu-btn-__value__'></div>
				<small mute>__value__</small>
			</a>
		</div>
		<div style='clear: both'></div>
	</div>
</div>
<div id="user-menu" class='user-menu' style="background:black;">
	<div>
		<a 1href='/hall#cafe'><i class='i i-shop'/>咖啡馆点餐</a>
	</div>
	<div>
		<a 1href='/hall#bookstore'><i class='i i-read'/>书刊查询</a>
	</div>
	<div>
		<a 1href='/hall#service'><i class='i i-service'/>售后服务</a>
	</div>

	<div>
		<a 1href='/hall#schedule'><i class='i i-calendar'/>活动报名</a>
	</div>
	<div>
		<a 1href='/hall#space'><i class='i i-tag'/>场地预约</a>
	</div>
	<div>
		<a 1href='/hall#project'><i class='i i-creative'/>项目申请</a>
	</div>

	<div>
		<a 1href='/hall#vip'><i class='i i-vip'/>vip服务</a>
	</div>
	<div>
		<a 1href='/hall#account'><i class='i i-recharge'/>账户与订单</a>
	</div>
	<div class='active'>
		<a href='/hall#my'><i class='i i-settings'/>个人中心</a>
	</div>
</div>